<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind--实例</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
    <style>
        .border{
            border:1px dotted gray;
        }
        .font{
            font-size: 1.5em;
        }
        .color{
            color: red;
        }
    </style>
</head>
<body>
    <h1>v-bind--实例</h1>
    <hr>
    <div id="app">
        <p><img :src="src" alt="大胖子" width="260px"></p>
        <p><a v-bind:href="url" target="_blank">百度</a></p>
        <h2>1、绑定class中的判断</h2>
        <div class="border">
            <p v-bind:class="classA">绑定class</p>
            <p :class="{color:isOk,font:isFont}">绑定class判断</p>
            <input type="checkbox" id="isOk" v-model="isOk"/>
            <label for="isOk">red == {{ isOk }}</label>
            <input type="checkbox" id="isFont" v-model="isFont"/>
            <label for="isFont">font == {{ isFont }}</label>
        </div>
        <h2>2、绑定class中的数组</h2>
        <div class="border">
            <p :class="classArr">绑定class数组</p>
        </div>
        <h2>3、绑定class中的三元运算符</h2>
        <div class="border">
            <p :class="isOk?classA:classB">绑定class数组</p>
            <input type="checkbox" id="isOk" v-model="isOk"/>
            <label for="isOk">red == {{ isOk }}</label>
        </div>
        <h2>4、绑定style</h2>
        <div class="border">
            <p :style="{color:isGreen,fontSize:fontSize}"><span>绑定style</span></p>
        </div>
        <h2>5、绑定style</h2>
        <div class="border">
            <p :style="style">绑定style</p>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                src:"https://goss1.vcg.com/creative/vcg/400/version23/VCG41157686859.jpg",
                url:"https://www.baidu.com",
                classA:"color",
                classB:"font",
                classArr:["color","font"],
                isOk:false,
                isFont:false,
                isGreen:'green',
                fontSize:"2em",
                style:{
                    font:"3em 黑体",
                    color:"red"
                }
            }
        });
    </script>
</body>
</html>